import React from 'react';
import { Card, Statistic, Progress } from 'antd';

const BillAnalysisWidget: React.FC = () => {
  return (
    <Card 
      title="账单分析" 
      size="small" 
      className="h-full"
      styles={{ body: { padding: '12px' } }}
    >
      <div className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <Statistic
            title="本月支出"
            value={8650}
            precision={2}
            prefix="¥"
            valueStyle={{ fontSize: '16px', color: '#ff4d4f' }}
          />
          <Statistic
            title="本月收入"
            value={15200}
            precision={2}
            prefix="¥"
            valueStyle={{ fontSize: '16px', color: '#52c41a' }}
          />
        </div>
        
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>预算使用率</span>
            <span>68%</span>
          </div>
          <Progress percent={68} strokeColor="#1890ff" />
        </div>

        <div className="text-xs text-gray-500 space-y-1">
          <div className="flex justify-between">
            <span>餐饮</span>
            <span>¥2,340</span>
          </div>
          <div className="flex justify-between">
            <span>交通</span>
            <span>¥890</span>
          </div>
          <div className="flex justify-between">
            <span>购物</span>
            <span>¥3,420</span>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default BillAnalysisWidget;